<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <title>西外可视化分析大屏</title>
    <link rel="stylesheet" href="../static/assets/css/iconfont.css">
    <link rel="stylesheet" href="../static/css/common.css">
    <link rel="stylesheet" href="../static/css/energyInvestmentRisk.css">
    <script src="../static/assets/js/jquery-3.3.1.min.js"></script>
</head>

<body id="investmentRisk">
<div id="container">
    <script src="../static/js/common.js"></script>
    <header style="height: 7.5rem">
        <div class="header-l">
            <h1 class="zh">一带一路沿线国家能源投资风险</h1>
            <h1 class="en">Energy investment risk in countries along Belt and Road</h1>
        </div>
        <div class="header-r">
            <time id="headerTime"></time>
        </div>
    </header>
    <main>
        <!--样式里的l,m,r,t,b分别代表左，中，右，上，下-->
        <div class="t">
            <div class="t-l">
                <div class="t-l-t">
                    <h3 class="zh">风险统计</h3>
                    <h3 class="en">Risk statistics</h3>
                    <ul>
                        <li>
                            <h4><i class="iconfont icon-shuju"></i>低风险</h4>
                            <div>
                                <span class="num">1</span>
                                <i class="iconfont icon-uparrow"></i>
                            </div>
                        </li>
                        <li>
                            <h4><i class="iconfont icon-shuju"></i>较低风险</h4>
                            <div>
                                <span class="num">8</span>
                                <i class="iconfont icon-uparrow"></i>
                            </div>
                        </li>
                        <li>
                            <h4><i class="iconfont icon-shuju"></i>中等风险</h4>
                            <div>
                                <span class="num">30</span>
                                <i class="iconfont icon-uparrow"></i>
                            </div>
                        </li>
                        <li>
                            <h4><i class="iconfont icon-shuju"></i>较高风险</h4>
                            <div>
                                <span class="num">17</span>
                                <i class="iconfont icon-uparrow"></i>
                            </div>
                        </li>
                        <li>
                            <h4><i class="iconfont icon-shuju"></i>高风险</h4>
                            <div>
                                <span class="num">9</span>
                                <i class="iconfont icon-uparrow"></i>
                            </div>
                        </li>
                        <li>
                            <h4><i class="iconfont icon-shuju"></i>总体趋势</h4>
                            <div>
                                <span class="num">12</span>
                                <i class="iconfont icon-uparrow"></i>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="t-l-b">
                    <h3 class="zh">能源投资低风险国家TOP10</h3>
                    <h3 class="en">Top 10 counties in terms of low risk of energy investment</h3>
                    <div id="ec01_bar_trend" class="chart-box"></div>
                </div>
            </div>
            <div class="t-r">
                <div class="chart-box" id="ec01_map"></div>
            </div>
        </div>
        <div class="b">
            <h3 class="zh">风险分布</h3>
            <h3 class="en">Risk distribution</h3>
            <ul>
                <li>
                    <h4>经济基础风险</h4>
                    <div id="ec00_pie" class="chart-box"></div>
                </li>
                <li>
                    <h4>社会风险</h4>
                    <div id="ec01_pie" class="chart-box"></div>
                </li>
                <li>
                    <h4>政治风险</h4>
                    <div id="ec02_pie" class="chart-box"></div>
                </li>
                <li>
                    <h4>中国因素风险</h4>
                    <div id="ec03_pie" class="chart-box"></div>
                </li>
                <li>
                    <h4>能源因素风险</h4>
                    <div id="ec04_pie" class="chart-box"></div>
                </li>
                <li>
                    <h4>环境风险</h4>
                    <div id="ec05_pie" class="chart-box"></div>
                </li>
            </ul>
        </div>
    </main>
</div>
<script src="../static/assets/js/echarts-4.2.0.js"></script>
<script src="../static/assets/js/world.js"></script>
<script src="../static/js/chartsCom.js"></script>
<script src="../static/js/energyInvestmentRisk.js"></script>
</body>
</html>







